<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
    }

    .container1 {
      height: 200px;
    }

    .container2 {
      height: 200px;
    }

    .container3 {
      height: 200px;
    }

    .container1 .box1 {
      background: red;
      display: block;
    }

    .container1 .box2 {
      background: blue;
      display: none;
    }

    .container1 .box3 {
      background: yellow;
      display: none;
    }

    .container2 .box1 {
      background: red;
      display: block;
    }

    .container2 .box2 {
      background: blue;
      display: none;
    }

    .container2 .box3 {
      background: yellow;
      display: none;
    }

    .container3 .box1 {
      background: red;
      display: block;
    }

    .container3 .box2 {
      background: blue;
      display: none;
    }

    .container3 .box3 {
      background: yellow;
      display: none;
    }
  </style>
</head>

<body>
  <div class="container1">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  <div class="container2">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <button class="next">点击我切换第二个选线卡下一页</button>

  <div class="container3">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <script>
    // 一个选项卡 ，随便写 ，按照事物发展的顺序书写代码 ，面向过程，注重过程；


    // 工厂模式
    function tab (btns, divs) {
      // 共性问题 
      btns.forEach((item, key) => {
        item.onclick = function () {
          forDiv(key);
        }
      })

      function forDiv (key) {
        divs.forEach((div, k) => {
          if (key === k) {
            // 点击按钮的索引 ，把和按钮索引一样的div 显示出来
            div.style.display = "block";
          } else {
            // 把和点击按钮不同的 div 隐藏起来
            div.style.display = "none";
          }
        })
      }

      let obj = {}; // 加原料
      obj.forDiv = forDiv;  // 加工原料

      return obj;  // 出厂 
    }

    // 多个选项卡 ，提高复用性， 函数封装 ；
    let btns = document.querySelectorAll(".container1 button");
    let divs = document.querySelectorAll(".container1 div");
    tab(btns, divs);

    let btn2s = document.querySelectorAll(".container2 button");
    let div2s = document.querySelectorAll(".container2 div");
    let tab2 = tab(btn2s, div2s);
    let nextBtn = document.querySelector(".next");
    let tabKey = 0;
    nextBtn.onclick = function () {
      tabKey++;
      if (tabKey > 2) {
        tabKey = 0;
      }
      tab2.forDiv(tabKey);
    }


    let btn3s = document.querySelectorAll(".container3 button");
    let div3s = document.querySelectorAll(".container3 div");
    let tab3 = tab(btn3s, div3s);

    let num = 0;
    setInterval(() => {
     num == 2 ? num = 0 : num ++
      tab3.forDiv(num);
    }, 1000)

  </script>
</body>

</html>